@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

.body {
  background-color: #b8c6db;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;

  .quiz-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
    width: 600px;
    overflow: hidden;

    .result {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quiz-header {
      padding: 4rem;

      h2 {
        padding: 1rem;
        text-align: center;
        margin: 0;
      }

      ul {
        list-style-type: none;
        padding: 0;

        li {
          font-size: 1.2rem;
          margin: 1rem 0;

          label {
            cursor: pointer;
          }
        }
      }
    }

    button {
      background-color: #8e44ad;
      color: #fff;
      border: none;
      display: block;
      width: 100%;
      cursor: pointer;
      font-size: 1.1rem;
      font-family: inherit;
      padding: 1.3rem;

      &:hover {
        background-color: #732d91;
      }

      &:focus {
        outline: none;
        background-color: #5e3370;
      }
    }
  }
}